<template>
  <el-icon>
    <component :is="modelValue"></component>
  </el-icon>
  <el-select
    filterable
    :modelValue="modelValue"
    class="m-2"
    placeholder="请选择图标"
    @change="handleChange"
  >
    <el-option
      v-for="item in iconList"
      :key="item"
      :label="item.label"
      :value="item"
    >
      <div class="flex items-center">
        <el-icon>
          <component :is="item.name"></component>
        </el-icon>
        <span class="ml-2">{{ item.name }}</span>
      </div>
    </el-option>
  </el-select>
</template>

<script setup>
import * as iconList from "@element-plus/icons-vue";
defineProps({
  modelValue: String,
});

// 让组件进行双向绑定
const emit = defineEmits(["update:modelValue"]);
const handleChange = (value) => {
  emit("update:modelValue", value.name);
};
</script>
